<template>
  <div class="page-loading" v-if="visible">
    <el-spinner></el-spinner>
    <p class="loading-text">{{ text }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  text: {
    type: String,
    default: '加载中...'
  }
})
</script>

<style scoped>
.page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
}

.loading-text {
  margin-top: 15px;
  color: #909399;
  font-size: 14px;
}
</style> 